<template>
  <div class="message-private-mobile">
    <!-- 上方应用菜单 -->
    <mu-appbar style="width: 100%" color="primary">
      <!-- 返回 -->
      <mu-menu slot="left">
        <mu-button flat @click="$router.go(-1)">
          <mu-icon value="arrow_back"></mu-icon>
        </mu-button>
      </mu-menu>

      <p style="text-align: center">私信</p>

      <!-- 菜单栏 -->
      <mu-menu slot="right">
        <mu-button flat text-color="#fff" @click="setOpen(!open)">
          <mu-icon value="menu"></mu-icon>
        </mu-button>
      </mu-menu>
    </mu-appbar>

    <chat-list v-if="tab === 'chatList'" @chat="toChat" />
    <contact-list v-else-if="tab === 'contactList'" @chat="toChat" />

    <mu-bottom-nav :value.sync="tab">
      <mu-bottom-nav-item value="chatList" title="消息列表" icon="chat_bubble"></mu-bottom-nav-item>
      <mu-bottom-nav-item value="contactList" title="联系人" icon="account_box"></mu-bottom-nav-item>
    </mu-bottom-nav>
  </div>
</template>

<script>
import { mapMutations, mapGetters } from 'vuex'
import MessagePrivateChatList from './MessagePrivateChatList'
import MessagePrivateContactList from './MessagePrivateContactList'

export default {
  name: 'MessagePrivateMobile',
  components: {
    ChatList: MessagePrivateChatList,
    ContactList: MessagePrivateContactList
  },
  data() {
    return {
      tab: 'chatList'
    }
  },
  computed: {
    ...mapGetters({
      open: 'phoneAsideDrawer'
    })
  },
  methods: {
    ...mapMutations({
      setOpen: 'SET_PHONE_ASIDE_DRAWER'
    }),
    toChat(userId) {
      this.$router.push({
        name: 'message-private-chat',
        params: {
          id: userId
        }
      })
    }
  }
}
</script>

<style scoped>
.message-private-mobile {
  display: flex;
  flex-flow: column nowrap;
  height: 100%;
}
.chat-list,
.contacts {
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.demo-loadmore-wrap {
  width: 100%;
  max-width: 360px;
  height: 420px;
  display: flex;
  flex-direction: column;
}
.demo-loadmore-wrap .mu-appbar {
  width: 100%;
}
.demo-loadmore-content {
  flex: 1;
  overflow: auto;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
</style>
